<template>
  <div>
    <!-- <div class="header">
      <p><i class="el-icon-arrow-left" @click="me"></i></p>
      <h5>订单中心</h5>
    </div>-->
    <div class="nav">
      <ul>
        <li
          v-for="(item, i) in tab"
          :key="i"
          :class="{ active: name === item.name }"
          @click="changeTab(item)"
        >{{ item.name }}</li>
      </ul>
    </div>
    <div class="content" v-for="(item, i) in list" :key="i">
      <p>
        <i class="el-icon-s-order"></i>
        订单号:{{item.order_id}}
        <b>{{(item.status == 1) ? "待付款" : (item.status ==2 ) ? "待发货" : (item.status ==3 ) ? "待收货" : (item.status ==4) ? "待评价" :''}}</b>
      </p>
      <div class="content2">
        <div class="photo">
          <img :src="item.products_img" alt />
        </div>

        <dl>
          <dt>{{item.product_name}}</dt>
          <dd class="d1">粉色</dd>
          <dd class="d2">￥{{item.total_amount}}</dd>
        </dl>
      </div>

      <div class="shop">
        <h3>共计件商品{{item.product_num}}</h3>
        <h4>
          合计：
          <span>{{item.total_amount}}.0</span>
        </h4>
      </div>
      <div class="btn">
        <router-link to="/customer">
          <el-button size="mini" round type="primary" >联系客服</el-button>
        </router-link>

        
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { orderInformation } from '../../api/index'
export default {
  data() {
    return {
      name: '全部',
      list: [],
      status: '',
      tab: [
        {
          name: '全部',
          status: '',
        },
        {
          name: '待付款',
          status: 1,
        },
        {
          name: '待发货',
          status: 2,
        },
        {
          name: '待收货',
          status: 3,
        },
        {
          name: '待评价',
          status: 4,
        },
      ],
    }
  },
  methods: {
    getOrder() {
      orderInformation({
        userId: this.$store.state.uid,
        status: this.status,
      }).then(res => {
        console.log(res, 'order')
        this.list = res.data.data
        this.list.map(
          item =>
            (item.products_img = this.$store.state.imgsrc + item.products_img)
        )
        // this.list.products_img = this.$store.state.imgsrc+ 	this.list.products_img
      })
    },
    changeTab(item) {
      this.name = item.name
      this.status = item.status
      this.getOrder()
    },
 
  },
  mounted() {
    this.getOrder()
  },
}
</script>

<style scoped>
.nav {
  /* width: 100vw; */
  height: 8vh;
  /* background: lightpink; */
  /* margin-top: 10vh; */
  line-height: 8vh;
  color: #c1c1c1;
  font-size: 16px;
  border-bottom: 1px solid #999;
  /* overflow: hidden; */
}
.nav ul {
  display: flex;
  justify-content: space-around;
}

.nav li.active {
  color: #409eff;
  border-bottom: 3px solid #409eff;
}
.content {
  /* width: 100vw;s */
  height: 30vh;
  /* background: royalblue; */
  border-bottom: 2px solid #f1f1f1;
}

.content p {
  /* width: 100vw; */
  height: 5vh;
  line-height: 5vh;
  /* margin-left: 2vw; */
  padding-left: 2vw;
  font-size: 2vh;
  /* background: cornsilk; */
}
.content i {
  color: #409eff;
}
.content b {
  margin-left: 24vw;
  font-weight: normal;
}
.content2 {
  display: flex;
  justify-content: flex-start;
	align-items: center;
}
.content2 dt {
  font-size: 4vw;
  padding-left: 3vw;
}
.content2 .d1 {
  margin-top: 1.5vh;
  font-size: 14px;
  padding-left: 2.5vw;
}
.content2 .d2 {
  margin-top: 1vh;
  font-size: 14px;
  color: red;
  padding-left: 3vw;
}
.content2 .d2 del {
  font-size: 12px;
  color: #ccc;
  padding-left: 3px;
}
.shop {
  width: 100vw;
  height: 7vh;
  margin-top: -1vh;
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
  justify-content: space-around;
  align-items: center;
  font-weight: normal;
  font-size: 12px;
}
.shop h3{
	padding-left: -15vw;
}
.shop h4 span {
  color: red;
}
.tubiao {
  position: absolute;
  top: 3vh;
  left: 4vw;
  font-weight: bold;
  color: #409eff;
  font-size: 24px;
}
.photo img {
  width: 80px;
  height: 80px;
  padding-left: 2vw;
}
.btn {
  /* width: 100vw; */
  height: 3vh;
  padding-left:75vw;
}
</style>